<ion-header>
  <ion-navbar>
    <ion-title>
      More music
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <ion-list>
    <audio-track #audio *ngFor="let track of myTracks" [track]="track" (onFinish)="onTrackFinished($event)">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="{{audio.art}}">
          <audio-track-play dark [audioTrack]="audio">
            <ion-spinner></ion-spinner>
          </audio-track-play>
        </ion-thumbnail>
        <div item-content style="width:100%">
          <p><strong>{{audio.title}}</strong> &#x26AC; <em>{{audio.artist}}</em></p>
          <audio-track-progress-bar duration progress [audioTrack]="audio"></audio-track-progress-bar>
          <em style="font-size:.5em">Track ID: {{audio.id}}</em>
        </div>
      </ion-item>
    </audio-track>
  </ion-list>

  <h3>API Usage</h3>
  <h4>Using AudioProvider to control playback</h4>
  <ion-list>
    <ion-item>
      <ion-label>Select track to play</ion-label>
      <ion-select [(ngModel)]="selectedTrack">
        <ion-option *ngFor="let track of allTracks" value="{{track.id}}">{{track.title}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
  <button ion-button block outline (click)="playSelectedTrack()">Play</button>
  <button ion-button block outline color="secondary" (click)="pauseSelectedTrack()">Pause</button>
</ion-content>
